<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>js sample</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
        
        function resolveTimeout(value, delay) {
            return new Promise((resolve) => setTimeout(() => resolve(value), delay));
        }
        function rejectTimeout(reason, delay) {
            return new Promise((r, reject) => setTimeout(() => reject(reason), delay));
        }
        const vegetables = ["oranges", "apples"];
        
        // promise any sample
        const promise = Promise.any([
            rejectTimeout(new Error("fruits is empty"), 1000),
            resolveTimeout(vegetables, 2000),
        ]);
        
        // 等待...
        const list = async () => {
            const result = await promise;
            console.log(result);
        };
        
        // 2 秒之后
        list(); // [ 'oranges', 'apples' ]
        
    </script>
</head>
<body>
    <div>js sample body</a></div>
    <div>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>

        <button type="button" class="btn btn-link">Link</button>
    </div>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown button
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>
    <p>If you click on me, I will disappear.</p>
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x
    <i class="fa fa-camera-retro fa-5x"></i> fa-5x
</body>
</html>